<template>
	<div class="main">
		<el-container class="main-content">
			<el-aside :width="isMenuFold ? 60 + 'px' : 210 + 'px'">
				<nav-menu :isMenuFold="isMenuFold"></nav-menu>
			</el-aside>
			<el-container class="page">
				<el-header class="page-header">
					<nav-header @foldChange="handleFoldChange"></nav-header>
				</el-header>
				<el-main class="page-content">
					<div class="page-info">
							<router-view></router-view>
					</div>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>
<script lang="ts">
	import { defineComponent, ref } from 'vue'
	import NavMenu from '@/components/nav-menu'
	import NavHeader from '@/components/nav-header'
	export default defineComponent({
		component: {
			NavMenu,
			NavHeader
		},
		setup() {
			const isMenuFold = ref(false)
			const handleFoldChange = (isFold: boolean) => {
				isMenuFold.value = isFold
			}
			return {
				isMenuFold,
				handleFoldChange
			}
		}
	})
</script>

<style lang="less" scoped>
	.main {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.main-content,
	.page {
		height: 100%;
	}
	.page-content {
		height: calc(100%-48px);
	}
	.el-header,
	.el-footer {
		display: flex;
		color: black;
		text-align: center;
		align-items: center;
	}
	.el-header {
		height: 48px !important;
	}
	.el-aside {
		overflow-x: hidden;
		overflow-y: auto;
		line-height: 200px;
		text-align: left;
		cursor: pointer;
		background-color: #001529;
		transition: width 0.3s linear;
		scrollbar-width: none;
		-ms-overflow-style: none;
		&::-webkit-scrollbar {
			display: none;
		}
	}
	.el-main {
		color: #333;
		text-align: center;
		background-color: #f0f2f5;
	}
	.page-info {
		background-color: white;
		border-radius: 5px;
	}
</style>
